<template>
  <div id="organizePage">
    <HeadNav type="admin" ref="head" :show="1"></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="admin" sort="event"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="powerType == 1">
            <div class="model-container">
              <div
                class="model-bg"
                style="padding-bottom: 75px; min-height: 660px"
              >
                <div class="section-title clearfix">
                  <div class="float-left">大事件管理</div>
                  <div class="float-right">
                    <span class="click-font" @click="addEvent">新增事件</span>
                  </div>
                </div>
                <div class="search">
                  <div class="content common">
                    <a-input-search
                      placeholder="搜索事件名称"
                      enter-button="搜索"
                      size="large"
                      v-model="inputVal"
                      @search="onSearch"
                    >
                      <div slot="prefix">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-search" />
                        </svg>
                        <span class="rowLine">|</span>
                      </div>
                    </a-input-search>
                  </div>
                </div>
                <!-- 高级搜素 -->
                <div class="high-search">
                  <div class="option">
                    <span class="title">事件类型</span>
                    <span
                      class="high-tab"
                      v-for="(item, index) in eventTypeList"
                      :key="index"
                      :class="{ active: eventType == index }"
                      @click="change(item,index, 'event')"
                      >{{ item.name }}</span
                    >
                  </div>
                  <div class="option">
                    <span class="title">关键字</span>
                    <span
                      class="high-tab"
                      v-for="(item, index) in keyWordsList"
                      :key="index"
                      :class="{ active: keyWordsType == index }"
                      @click="change(item,index, 'keywords')"
                      >{{ item.keywords }}</span
                    >
                  </div>
                </div>
                <!-- 列表 -->
                <div class="table" style="margin-top: 30px">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="90" />
                      <col width="410" />
                      <col width="180" />
                      <col width="80" />
                      <col width="80" />
                      <col width="90" />
                      <col width="120" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>事件ID</td>
                        <td>事件名称</td>
                        <td style="text-align: right">时间</td>
                        <td style="text-align: center">类型</td>
                        <td style="text-align: center">重要性</td>
                        <td style="text-align: center">关联品种</td>
                        <td style="text-align: right">操作</td>
                      </tr>
                    </thead>
                    <tbody v-if="list.length > 0">
                      <tr v-for="(item, index) in list" :key="index">
                        <td>{{ item.event_id }}</td>
                        <td>
                          <span
                            class="click-font"
                            @click="toEventDetail(item, index)"
                            >{{ item.title }}</span
                          >
                          <span
                            class="data-tab data-tab-seven data-tab-click"
                            v-for="(litem, lindex) in item.keywords"
                            :key="lindex"
                            >{{ litem.value }}</span
                          >
                        </td>
                        <td style="text-align: right">
                          <span class="main-font" v-if="item.start_date == item.end_date">
                            {{item.start_date}}
                          </span>
                          <span class="main-font" v-else>
                            {{item.start_date}} 至 {{item.end_date}}
                          </span>
                        </td>
                        <td style="text-align: center">
                          <span>{{
                            item.type == 1 ? "公开" : "内部"
                          }}</span>
                        </td>
                        <td style="text-align: center">
                          <span v-if="item.event_level == 1"
                            >一般</span
                          >
                          <span v-if="item.event_level == 2"
                            >重要</span
                          >
                          <span v-if="item.event_level == 3"
                            >特别重要</span
                          >
                        </td>
                        <td style="text-align: center">
                          <span>{{ item.goods_count }}个品种</span>
                        </td>
                        <td style="text-align: right">
                          <span
                            class="click-font"
                            @click="openInfo(item, index)"
                            v-if="item.state == 1"
                            >编辑</span
                          >
                          <span
                            class="click-font"
                            style="margin-left: 10px"
                            v-if="item.state == 1"
                            @click="deleteOrganize(item, index)"
                            >删除</span
                          >
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="9" style="text-align: center">
                          <div style="margin-top:50px;"><a-empty /></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 分页 -->
                <div class="page">
                  <a-pagination
                    :show-total="(total) => `共 ${total} 条数据`"
                    :default-current="1"
                    v-model="page"
                    :total="total"
                    :defaultPageSize="pageSize"
                    @change="onShowSizeChange"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增事件弹层 -->
    <a-modal
      v-model="addOrganize"
      width="600px"
      :maskClosable="false"
      :title="isAdd ? '编辑事件' : '新增事件'"
      on-ok="handleOk"
    >
      <template slot="footer">
        <div class="clearfix">
          <!-- <div class="float-left click-font" style="line-height: 32px">
            不明白？查看大事件功能说明
          </div> -->
          <div class="float-rigth">
            <a-button key="back" @click="handleCancel">取消</a-button>
            <a-button key="submit" type="primary" @click="handleOk"
              >确定</a-button
            >
          </div>
        </div>
      </template>
      <div class="popup" style="height:550px;overflow-y:auto;">
        <div class="option">
          <span class="lable event">*事件名称</span>
          <div class="normal event">
            <a-input placeholder="最多15个字" v-model="eventInfo.name" />
          </div>
        </div>
        <div class="option">
          <span class="lable event">嵌入图表</span>
          <div class="normal event">
            <a-radio-group
              name="radioGroup"
              v-model="eventInfo.chartType"
              size="small"
            >
              <a-radio :value="2">嵌入所有品种</a-radio>
              <a-radio :value="1">嵌入关联品种</a-radio>
              <a-radio :value="0">不嵌入</a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="option">
          <span class="lable event">*重要级别</span>
          <div class="normal event">
            <a-radio-group
              name="radioGroup"
              v-model="eventInfo.level"
              size="small"
            >
              <a-radio :value="3">特别重要</a-radio>
              <a-radio :value="2">重要</a-radio>
              <a-radio :value="1">一般</a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="option">
          <span class="lable event">关键字</span>
          <div class="normal event">
            <a-select
              mode="multiple"
              style="width: 100%"
              v-model="eventInfo.keyWords"
              placeholder="选择关键字"
              :filter-option="false"
              @change="handleChange"
            >
              <a-select-option
                v-for="kitem in keyList"
                :key="kitem.id"
                >{{ kitem.keywords }}</a-select-option
              >
            </a-select>
          </div>
        </div>
        <div class="option">
          <span class="lable event" style="vertical-align: top">事件描述</span>
          <div class="normal event">
            <a-textarea
              placeholder
              v-model="eventInfo.desc"
              style="height: 96px"
            />
          </div>
        </div>
        <div style="height:1px;background-color:#E8E8E8;margin:10px 24px 0 24px;"></div>
        <div class="option">
          <span class="lable event">*时间类型</span>
          <div class="normal event">
            <a-radio-group
              name="radioGroup"
              v-model="eventInfo.timeType"
              size="small"
            >
              <a-radio :value="1">单日</a-radio>
              <a-radio :value="2">周期</a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="option">
          <span class="lable event">农历日期</span>
          <div class="normal event">
            <a-radio-group
              name="radioGroup"
              v-model="eventInfo.isShow"
              size="small"
            >
              <a-radio :value="2">显示</a-radio>
              <a-radio :value="1">不显示</a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="option">
          <span class="lable event" style="vertical-align:top;margin-top:7px;">时间</span>
          <div class="normal event" v-show="eventInfo.timeType == 1">
            <div style="margin-bottom:10px;" v-for="(sitem,sindex) in eventInfo.singleList" :key="sindex">
              <a-date-picker format="YYYY-MM-DD" inputReadOnly @change="sonChange(sindex,$event)" :value="sitem.start_date" />
              <span class="click-font" v-if="sindex > 0" style="margin-left:15px;" @click="deleteStime(sindex)">删除</span>
            </div>
          </div>
          <div class="normal event" v-show="eventInfo.timeType == 2">
            <div style="margin-bottom:10px;" v-for="(citem,cindex) in eventInfo.cycleList" :key="cindex">
              <a-range-picker format="YYYY-MM-DD" @change="conChange(cindex,$event)" inputReadOnly :value="[citem.start_date,citem.end_date]" />
              <span class="click-font" v-if="cindex > 0" style="margin-left:15px;" @click="deleteCtime(cindex)">删除</span>
            </div>
          </div>
          <div class="add-time" @click="addTime">+添加时间</div>
        </div>
      </div>
    </a-modal>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
  </div>
</template>
<style scoped lang="scss" src="@/style/scss/pages/admin/index.scss"></style>
<script>
import {
  EVENT_LISTS,
  EVENT_KEYWORDS_LISTS,
  EVENT_ADD,
  EVENT_UPDATE,
  EVENT_DELETE,
} from "../../apis/admin.js";
export default {
  data() {
    return {
      powerType: 2,
      type: 0,
      eventType: 0,
      keyWordsType: 0,
      sortType: 0,
      eventTypeList: [
        { name: "全部", type: 0 },
        // {name:"公共节日",type:1},
        { name: "公开事件", type: 1 },
        { name: "内部事件", type: 2 },
      ],
      keyWordsList: [],
      sortList: [
        { name: "默认", type: 0 },
        { name: "时间正序", type: 1 },
        { name: "时间倒序", type: 2 },
        { name: "关联品种数正序", type: 3 },
        { name: "关联品种数倒序", type: 4 },
      ],
      inputVal: "",
      page: 1,
      pageSize: 20,
      total: 0,
      list: [],
      addOrganize: false,
      isAdd: 0,
      keyList: [],
      eventInfo: {
        id: 0,
        name: "",
        type: 1,
        timeType: 1,
        chartType:0,
        isShow:0,
        singleList:[{start_date:null,end_date:null}],
        cycleList:[{start_date:null,end_date:null}],
        level: 0,
        keyWords: [],
        desc: "",
      },
      isLoading: true,
    };
  },
  mounted() {
    this.powerType = this.$refs.head.accountInfo.type;
    if (this.powerType == 1) {
      this.getData();
      this.getKeyWords();
    } else {
      this.isLoading = false;
    }
  },
  updated() {},
  methods: {
    async getData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        title: this.inputVal,
        page: this.page,
        page_size: this.pageSize,
        keywords: this.keyWordsType,
        // state: 1,
        timestamp: tStamp,
      };
      if(this.eventType){
        data.type = this.eventType;
      }
      data.sign = this.$getSign(data);
      let res = await EVENT_LISTS(data);
      if (res.code == 0) {
        this.powerType = 1;
        this.list = [];
        this.total = res.data.count;
        this.list = res.data.events;
        this.isLoading = false;
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.powerType = 0;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    async getKeyWords() {
      var tStamp = this.$getTimeStamp();
      let data = {
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await EVENT_KEYWORDS_LISTS(data);
      if (res.code == 0) {
        this.powerType = 1;
        this.keyWordsList = [];
        let _obj = {id:0,keywords:'全部'};
        this.keyWordsList.push(_obj);
        res.data.map((value)=>{
          this.keyWordsList.push(value);
        })
        this.keyList = res.data;
      } else {
        if (res.code == 1009) {
          this.powerType = 0;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    async addEvents() {
      var tStamp = this.$getTimeStamp();
      let data = {
        title: this.eventInfo.name,
        type: this.eventInfo.type,
        event_level: this.eventInfo.level,
        keywords: this.eventInfo.keyWords.join(","),
        event_desc: this.eventInfo.desc,
        chart_type: this.eventInfo.chartType,
        version_data: this.eventInfo.timeType == 1?JSON.stringify(this.eventInfo.singleList):JSON.stringify(this.eventInfo.cycleList),
        // organization_id: 0,
        timestamp: tStamp,
      };
      if(this.eventInfo.isShow){
        data.date_type = this.eventInfo.isShow;
      }
      data.sign = this.$getSign(data);
      let res = await EVENT_ADD(data);
      if (res.code == 0) {
        this.$refs.head.globalTip(2, "新增成功", 0);
        this.getData();
        this.addOrganize = false;
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    async editEvent() {
      var tStamp = this.$getTimeStamp();
      let data = {
        event_id: this.eventInfo.id,
        title: this.eventInfo.name,
        type: this.eventInfo.type,
        event_level: this.eventInfo.level,
        keywords: this.eventInfo.keyWords.join(","),
        event_desc: this.eventInfo.desc,
        chart_type: this.eventInfo.chartType,
        version_data: this.eventInfo.timeType == 1?JSON.stringify(this.eventInfo.singleList):JSON.stringify(this.eventInfo.cycleList),
        // organization_id: this.$refs.head.publishInfo.organization_id,
        timestamp: tStamp,
      };
      if(this.eventInfo.isShow){
        data.date_type = this.eventInfo.isShow;
      }
      data.sign = this.$getSign(data);
      let res = await EVENT_UPDATE(data);
      if (res.code == 0) {
        this.$refs.head.globalTip(2, "编辑成功", 0);
        this.getData();
        this.addOrganize = false;
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    async deleteEvent(id) {
      var tStamp = this.$getTimeStamp();
      let data = {
        event_id: id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await EVENT_DELETE(data);
      if (res.code == 0) {
        this.$refs.head.globalTip(2, "删除成功", 0);
        this.getData();
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    onSearch(value) {
      this.isLoading = true;
      this.page = 1;
      // this.searchVal = value;
      this.getData();
    },
    control() {
      this.type = this.type ? 0 : 1;
    },
    change(item,index, type) {
      this.isLoading = true;
      if (type == "event") {
        this.eventType = index;
      } else if (type == "keywords") {
        this.keyWordsType = item.id;
      }
      this.page = 1;
      this.getData();
    },
    onShowSizeChange(page, pageSize) {
      this.isLoading = true;
      this.page = page;
      this.getData();
    },
    fetchUser(value){
      console.log(111,value)
      this.keyList = [];
      this.keyList = [
        {id:12,keywords:"sdfsdf"},
        {id:13,keywords:"哈哈哈哈的"},
      ]
    },
    addEvent() {
      this.isAdd = 0;
      this.eventInfo.id = 0;
      this.eventInfo.name = "";
      this.eventInfo.type = 1;
      this.eventInfo.level = 0;
      this.eventInfo.keyWords = [];
      this.eventInfo.desc = "";
      this.eventInfo.timeType = 1;
      this.eventInfo.chartType = 0;
      this.eventInfo.isShow = 1;
      this.eventInfo.singleList = [{start_date:null,end_date:null}];
      this.eventInfo.cycleList = [{start_date:null,end_date:null}];
      this.addOrganize = true;
    },
    openInfo(item, index) {
      // console.log(item);
      this.isAdd = 1;
      this.eventInfo.id = item.event_id;
      this.eventInfo.name = item.title;
      this.eventInfo.type = item.type;
      this.eventInfo.level = item.event_level;
      this.eventInfo.keyWords = item.keywords.map((value, key) => {
        return value.id;
      });
      this.eventInfo.desc = item.event_desc;
      this.eventInfo.chartType = item.chart_type;
      this.eventInfo.isShow = item.date_type;
      this.eventInfo.cycleList = [];
      this.eventInfo.singleList = [];
      if(item.version_date[0].start_date == item.version_date[0].end_date){
        this.eventInfo.timeType = 1;
        this.eventInfo.cycleList = [{start_date:null,end_date:null}];
        item.version_date.map((value,key)=>{
          this.eventInfo.singleList.push(value);
        });
      }else{
        this.eventInfo.timeType = 2;
        this.eventInfo.singleList = [{start_date:null,end_date:null}];
        item.version_date.map((value,key)=>{
          this.eventInfo.cycleList.push(value);
        });
      }
      this.addOrganize = true;
    },
    handleCancel() {
      this.addOrganize = false;
    },
    handleOk() {
      // console.log(this.eventInfo);
      if (this.eventInfo.name.length == 0) {
        this.$refs.head.globalTip(1, "请填写事件名称", 0);
        return;
      }
      if (this.eventInfo.name.length > 15) {
        this.$refs.head.globalTip(1, "事件名称不能超过15个字", 0);
        return;
      }
      if (this.eventInfo.level == 0) {
        this.$refs.head.globalTip(1, "请选择事件重要级别", 0);
        return;
      }
      let _slength = 0,_clength = 0;
      this.eventInfo.singleList.map((value,key)=>{
        if(value.start_date != null){

        }else{
          _slength ++;
        }
      })
      this.eventInfo.cycleList.map((value,key)=>{
        if(value.start_date != null){

        }else{
          _clength ++;
        }
      })
      if (this.eventInfo.timeType == 1) {
        if(_slength > 0){
          this.$refs.head.globalTip(1, "事件时间不可留空，请检查", 0);
          return;
        }
      }else{
        if(_clength > 0){
          this.$refs.head.globalTip(1, "事件时间不可留空，请检查", 0);
          return;
        }
      }
      if (this.isAdd == 0) {
        this.addEvents();
      } else {
        this.editEvent();
      }
    },
    handleChange(value) {
      // console.log(value);
      this.eventInfo.keyWords = value;
    },
    deleteOrganize(item, index) {
      var _this = this;
      this.$confirm({
        title: "确认删除事件",
        content: "请谨慎操作。",
        okText: "删除事件",
        cancelText: "取消",
        okType: "danger",
        onOk() {
          _this.deleteEvent(item.event_id);
        },
        onCancel() {},
      });
    },
    toEventDetail(item, index) {
      this.$router.push({
        name: "eventdetail",
        query: {
          event_id: item.event_id,
        },
      });
    },
    // 选择时间
    sonChange(sindex, e) {
      let _date = null;
      if(e != null){
        _date = e.format("YYYY-MM-DD");
      }
      // console.log(sindex,_date);
      this.eventInfo.singleList = this.eventInfo.singleList.map((value,key)=>{
        if(sindex == key){
          value.start_date = _date;
          value.end_date = _date;
        }
        return value;
      })
    },
    conChange(cindex, e) {
      let s_date = null,e_date = null;
      if(e.length > 1){
        s_date = e[0].format("YYYY-MM-DD");
        e_date = e[1].format("YYYY-MM-DD");
      }
      // console.log(cindex,e,s_date,e_date);
      this.eventInfo.cycleList = this.eventInfo.cycleList.map((value,key)=>{
        if(cindex == key){
          value.start_date = s_date;
          value.end_date = e_date;
        }
        return value;
      })
    },
    // 删除时间
    deleteStime(sindex){
      // console.log(sindex);
      this.eventInfo.singleList = this.eventInfo.singleList.filter((value,key)=>{
        return sindex != key;
      })
    },
    deleteCtime(cindex){
      // console.log(cindex);
      this.eventInfo.cycleList = this.eventInfo.cycleList.filter((value,key)=>{
        return cindex != key;
      })
    },
    // 添加时间
    addTime(){
      if(this.eventInfo.timeType == 1){
        if(this.eventInfo.singleList[this.eventInfo.singleList.length - 1].start_date != null){
          let _arr = this.eventInfo.singleList[this.eventInfo.singleList.length - 1].start_date.split('-'),_date;
          _arr[0] = Number(_arr[0]) + 1;
          _date = _arr.join('-');
          if(_date.indexOf('2-29') > -1){
            this.eventInfo.singleList.push({start_date:null,end_date:null});
          }else{
            this.eventInfo.singleList.push({start_date:_date,end_date:_date});
          }
        }else{
          this.eventInfo.singleList.push({start_date:null,end_date:null});
        }
      }else{
        let _arr1 = this.eventInfo.cycleList[this.eventInfo.cycleList.length - 1].start_date.split('-'),_date,_arr2 = this.eventInfo.cycleList[this.eventInfo.cycleList.length - 1].end_date.split('-'),_date1,_date2;
          _arr1[0] = Number(_arr1[0]) + 1;
          _arr2[0] = Number(_arr2[0]) + 1;
          _date1 = _arr1.join('-');
          _date2 = _arr2.join('-');
          if(_date1.indexOf('2-29') > -1 || _date2.indexOf('2-29') > -1){
            this.eventInfo.cycleList.push({start_date:null,end_date:null});
          }else{
            this.eventInfo.cycleList.push({start_date:_date1,end_date:_date2});
          }
      }
    }
  },
};
</script>
